<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>	
<div id="root">
	<div>
		<ul>
			<li>
				<router-link to='/'>/</router-link>
			</li>
			<li>
				<router-link to='/other'>/other</router-link>
			</li>
		</ul>
	</div>
	<div>
		<router-view class='view one'></router-view>
		<router-view class='view two' name='a'></router-view>
		<router-view class='view three' name='b'></router-view>
	</div>
</div>
<script>
	const Foo = {template:`<div>欢迎来到Foo页面</div>`};
	const Bar = {template:`<div>欢迎来到Bar页面</div>`};
	const Baz = {template:`<div>欢迎来到Baz页面</div>`};


	const router = new VueRouter({
		routes:[
			{
				path:'/',
				components:{
					default:Foo,
					a:Bar,
					b:Baz
				}},
			{
				path:'/other',
				components:{
					default:Baz,
					a:Bar,
					b:Foo
				}},
		]
	})
	const vm = new Vue({
		el : '#root',
		router,
		data : {}
	})
</script>	
</body>
</html>